<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Title</title>

    <!-- jquery库 -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <!-- 自己写的css文件 -->
    <link rel="stylesheet" type="text/css" href="../css/background1.css">

    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- 可选的Bootstrap主题文件（一般不使用） -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body class="tab1 top100">
<div class="container">
    <!-- 欢迎语 -->
    <div class="row">
        <h1 class="title1">你好，朋友</h1>
    </div>

    <!-- 输入框 -->
    <div id="loginBox" class="row top50">
        <form class="form-horizontal" role="form">

            <div class="form-group">
                <div onclick="identify()"><a class="col-sm-offset-11 col-sm-1" href="#">注册账号</a></div>
            </div>

            <div class="form-group">
                <label for="loginAccount" class="col-sm-2 control-label">账号</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="loginAccount" placeholder="请输入账号">
                </div>
            </div>
            <div class="form-group">
                <label for="loginPassword" class="col-sm-2 control-label">密码</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="loginPassword" placeholder="请输入密码">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-10 col-sm-2">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" onclick="ifShowPassword()">显示密码
                        </label>

                        <label>
                            <!--这里type用button，用submit无法跳转（后者是提交表单的）-->
                            <button type="button" class="btn btn-default" onclick="login()">登录</button>
                        </label>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <!-- 注册框 -->
    <div id="registerBox" class="row top50" style="display: none">
        <form class="form-horizontal" role="form">

            <div class="form-group">
                <div onclick="returnLoginBox()"><a class="col-sm-offset-11 col-sm-1" href="#">返回登陆</a></div>
            </div>

            <div class="form-group">
                <label for="registerAccount" class="col-sm-2 control-label">账号</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="registerAccount" placeholder="请输入注册账号">
                </div>
            </div>
            <div class="form-group">
                <label for="registerPassword" class="col-sm-2 control-label">密码</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="registerPassword" placeholder="请输入注册密码">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-10 col-sm-2">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" onclick="ifShowPassword()">显示密码
                        </label>

                        <label>
                            <!--这里type用button，用submit无法跳转（后者是提交表单的）-->
                            <button type="button" class="btn btn-default" onclick="register()">提交</button>
                        </label>
                    </div>
                </div>
            </div>
        </form>
    </div>


</div>




<!-- 自定义js执行函数 -->
<script>

    //提交注册信息，并存入后台数据库
    function register(){
        var account = document.getElementById("registerAccount").value;
        var password = document.getElementById("registerPassword").value;

        if (account.length == 0 || password.length == 0)
        {
            alert('账号或密码不能为空');
        }else{
            var data = {
                //json格式
                "account":account, "password":password
            };

            console.log(JSON.stringify(data));

            $.ajax({
                type: "post",
                // ..代表的应该是 http://localhost:8080
                url: "../register",
                data: JSON.stringify(data),
                contentType : 'application/json;charset=utf-8',
                dataType: "json",

                async:false,

                // //key/value格式
                // data: 'username=ha&password=123',
                success: function(data){
                    console.log(data)
                    if (data.result){
                        window.location.href = "../login";
                        alert("注册成功！！！");
                    }else {
                        alert("注册失败！！！");
                    }
                }
            });
        }
    }

    //验证是否为推荐人推荐的，是，才可进行注册
    function identify(){

        var name = window.prompt("请输入推荐者的名字"); // 弹出input框（位于对象顶层）

        //如果点取消的话，会返回Null值
        if (name != null) {
            $.ajax({
                type: "post",
                // ..代表的应该是 http://localhost:8080
                url: "../identify",
                data: name,
                contentType : 'application/json;charset=utf-8',
                dataType: "json",
                async:false,
                // //key/value格式
                // data: 'username=ha&password=123',
                success: function(data){
                    console.log(data)
                    if (data.result){
                        //显示注册框
                        showRegisterBox();
                    }else {
                        alert("你输入的推荐人不对");
                    }
                }
            });

        }else{
            alert("已取消");
        }
    }

    //显示注册框的方法
    function showRegisterBox() {
        var loginBox = document.getElementById("loginBox");
        var registerBox = document.getElementById("registerBox");
        loginBox.style.display = "none";
        registerBox.style.display = "block";
    }


    //返回登陆框的方法
    function returnLoginBox() {
        var loginBox = document.getElementById("loginBox");
        var registerBox = document.getElementById("registerBox");
        loginBox.style.display = "block";
        registerBox.style.display = "none";
    }


    //判断是否要密码隐藏显示
    function ifShowPassword() {
        //:checkbox代表所有的checkbox
        if($(':checkbox').is(':checked')) {
            $("#loginPassword").get(0).setAttribute("type","text");
            $("#registerPassword").get(0).setAttribute("type","text");
        }else {
            $("#loginPassword").get(0).setAttribute("type","password");
            $("#registerPassword").get(0).setAttribute("type","text");
        }
    }

    //登陆方法（ajax）
    function login() {
        var account = document.getElementById("loginAccount").value;
        var password = document.getElementById("loginPassword").value;


        if (account.length == 0 || password.length == 0)
        {
            alert('账号或密码不能为空');
        }else {
            var data = {
                //json格式
                "account":account, "password":password
            };

            //JSON.stringify(data) 从data中解析出字符串
            console.log(JSON.stringify(data));

            $.ajax({
                type: "post",
                // ..代表的应该是 http://localhost:8080
                url: "../validation",
                data: JSON.stringify(data),
                contentType : 'application/json;charset=utf-8',
                dataType: "json",

                async:false,

                // //key/value格式
                // data: 'username=ha&password=123',
                success: function(data){
                    console.log(data)
                    if (data.result){
                        window.location.href = data.url;
                    }else {
                        alert("您输入的账号密码有误！！");
                    }
                }
            });
        }
    }
</script>
</body>
</html>